<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内嵌式 :css写在style标签中-->
    <style>
        /* ctrl + /这是css的注释 */
        /* css都是写在style里面title的下面 */
        /* 选择器{css属性}  选择器: 查找标签*/
        p {
            /* 颜色 */
            color: red;
            /* 字体变大 px:像素 */
            font-size: 30px;
            /* 背景颜色 */
            background-color: aqua;
            /* 宽度、高度 */
            width: 400px;
            height: 400px;
            /* 背景图片background-image */
            background-image: url(../wanxia2.jpg);
            /* 背景平铺background-repeat (repeat默认水平平铺,no repeat默认水平不平铺,repeat-x沿着水平方向平铺,repeat-y沿着垂直方向平铺)*/
            background-repeat: no-repeat;
            background-repeat: repeat-x;
            background-repeat: repeat-y;
            /* 背景位置background-position水平和垂直中间用空格隔开 */
            /* 方位名词(最多只能表示9个位置水平方向)，left，center居中，night 垂直方向,yop,center居中,bottom */
            /* 数字+px(坐标)原点(0 0)位置在左上角x轴水平向右y轴垂直向下，操作 将凸起左上角坐标重合即可 */
            background-position: center;
            background-position: -50px 100px ;
            /* background复合连写background: 属性用空格隔开不分先后顺序(数值属性不能颠倒顺序)*/
            
        







        }
    </style>

    <!-- 外联式 :css写在一个单独的.css文件中-->
    <!-- 需要通过link标签在网页中引入 -->
    <!-- 关系 :样式表 -->
    <link rel="stylesheet" href="./my.css">


    <!-- 行内式 :css写在标签的style属性中 -->
    <!-- 后续配合js使用 -->
    <div style="color: aqua; font-size: 30px;">这是div标签</div>

    <!--  类选择器 . + 类名{css属性名: 属性值;}-->
    <style>
        .red {
            color: blue;
        }

        .size {
            font-size: 66px;
        }

        /* id选择器 #id属性器{css属性名: 属性值; */
        #blue {
            color: aquamarine;
        }

        /* 通配符选择器(网页通配) * + { css属性名: 属性值; } */
        /* 用于去除默认的margin和padding  */

        /* 字体样式 大小: font-size(如同时设置大小和行高的连写用斜杠隔开)  粗细: font-weight(取值整百)  样式: font-style(正常normal、       倾斜italic)  类型font-family(font : 可以用属性连写用空格隔开-复合属性  无衬线字体sans-serif  衬线字体serif  等宽字体monospace) 行高: line-height(当前标签font-size的倍数) */
        /* 像素单位 + px */
        /* 谷歌浏览器默认字号是16 */
        /* windows默认字体是微软雅黑 */
        div {
            font-weight: 500;
        }

        div {
            font-style: italic;
        }



        h2 {
            font-family: 微软雅黑, 黑体, sans-serif;
        }

        /* 文本样式  缩进: text-indent */
        /* 水平对齐方式(所有内容对齐): text-align(left左对齐 center居中对齐 right右对齐) */
        /* 修饰: text-decoration (underline下划线  line-through删除线 overline上划线 none无装饰线) */
        /* 开发中会使用 text-decoration : none ；清除a标签默认的下划线*/
        /* 字体文本单位(/个字) + em */

        p {
            text-indent: 2em;
            text-decoration: underline;
            line-height: 2;
        }

        h2 {
            text-align: center;
            text-decoration: line-through;
        }

        body {
            text-decoration: overline;
        }

        /* 谷歌调试工具的快捷键f12或鼠标右键检查 */
    </style>












</head>

<body>

    <p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>

    <h4>这是h4标签</h4>

    <!-- 类名不能以数字或中划线开头 -->
    <!-- 一个标签可以同时有多个类名使用空格隔开 -->
    <div class="red">这个标签文字也变色</div>

    <!-- id属性值在一个页面中是唯一的 一个标签只能有一个id属性值 一个id选择器只能选中一个标签  -->
    <div id="blue">这个标签文字也变色</div>



    <h2>字体类型</h2>

    <img src="../wanxia2.jpg" alt="">










</body>


</html>